<template>
    <view class="container" :style="{ display: visible ? 'block' : 'none' }">
        <view class="con-bg"></view>
        <view class="header" style="position: relative;">
            <view class="icon">
                <image src="~@/static/sj_logo.png" class="icon"></image>
            </view>
            <view class="info">
                <view class="name">云链商科技有限公司</view>
                <view class="mobile">14464553252</view>
            </view>
        </view>

        <!-- 月销售目标 -->
        <view class="section" style="position: relative;">
            <view class="section-title">月销售目标</view>
            <view class="section-main" style="display: flex;">
                <view class="item item_sl">
                    <view class="item-title">销售收入(元)</view>
                    <view class="item-value">{{ monthReport.orderMoney }}</view>
                    <view class="item-row">
                        <view class="r-name">完成率</view>
                        <view class="r-value">62.12%
                        </view>
                    </view>
                    <view class="item-title">销售目标(元)</view>
                    <view class="item-value" style="font-size: 36rpx;">{{ monthReport.orderMoneyTarget }}</view>
                </view>
                <view style="width: 24rpx;"></view>
                <view class="item item_ml">
                    <view class="item-title">销售毛利(元)</view>
                    <view class="item-value">{{ monthReport.profit }}</view>
                    <view class="item-row">
                        <view class="r-name">完成率</view>
                        <view class="r-value">68.32%</view>
                    </view>
                    <view class="item-title">毛利目标(元)</view>
                    <view class="item-value" style="font-size: 36rpx;">{{ monthReport.profitTarget }}</view>
                </view>
            </view>
        </view>

        <!-- 月数据汇总 -->
        <view class="section" style="position: relative;">
            <view class="section-title">月数据汇总</view>
            <view class="">
                <!-- 汇总数据 -->
                <!-- <view class="summary">
                    <view class="s-item">
                        <image src="~@/static/img/icon_yslhj.png" class="icon"></image>
                        <view class="con">
                            <view class="num">12313.23</view>
                            <view class="name">月收入合计(元)</view>
                        </view>
                    </view>
                    <view class="s-item">
                        <image src="~@/static/img/icon_yzchj.png" class="icon"></image>
                        <view class="con">
                            <view class="num">12313.23</view>
                            <view class="name">月收入合计(元)</view>
                        </view>
                    </view>
                </view> -->

                <!-- 其他汇总数据 -->
                <view class="summary-nav">
                    <view class="item">
                        <view class="name">常规收入(元）</view>
                        <view class="value">{{ monthReport.orderMoney0 }}</view>
                    </view>
                    <view class="item">
                        <view class="name">国补收入(元）</view>
                        <view class="value">{{ monthReport.orderMoney4 }}</view>
                    </view>
                    <view class="item">
                        <view class="name">分享购收入(元）</view>
                        <view class="value">{{ monthReport.orderMoney3 }}</view>
                    </view>
                </view>
                <view class="summary-nav">
                    <view class="item">
                        <view class="name">订单成本(元）</view>
                        <view class="value">{{ monthReport.cost }}</view>
                    </view>
                    <view class="item">
                        <view class="name">订单费用(元）</view>
                        <view class="value">todo</view>
                    </view>
                    <view class="item">
                        <view class="name">其他费用(元）</view>
                        <view class="value">{{ monthReport.otherCost }}</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="section" style="position: relative;">
            <view class="nav-list">
                <view class="nav-item" @click="goOrder">
                    <image src="~@/static/img/icon_ddgl.png" class="icon"></image>
                    <text>订单管理</text>
                </view>
                <view class="nav-item" @click="easyGoTo('/pages/customer/add')">
                    <image src="~@/static/img/icon_khgl.png" class="icon"></image>
                    <text>客户管理</text>
                </view>
                <view class="nav-item" @click="toOfferOrder()">
                    <image src="~@/static/img/icon_sykd.png" class="icon"></image>
                    <text>收银开单</text>
                </view>
                <view class="nav-item">
                    <image src="~@/static/img/icon_bfkh.png" class="icon"></image>
                    <text>拜访客户</text>
                </view>
                <view class="nav-item" @click="test()">
                    <image src="~@/static/img/icon_fysq.png" class="icon"></image>
                    <text>费用申请</text>
                </view>
                <view class="nav-item" @click="easyGoTo('/pages/customer/replace-order?selectType=2')">
                    <image src="~@/static/img/icon_tdsq.png" class="icon"></image>
                    <text>退单申请</text>
                </view>
            </view>
        </view>

        <pop-check-cut ref="popCheckCut" :datas="datas" @selected="selected"></pop-check-cut>
    </view>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex"
import storage from "@/uni-sub-base/utils/storage.js"
import { GetMonthReport } from "@/service/api/order.js"
import popCheckCut from "@/uni-sub-base/module/cutAccount/cut-account.vue"
import defaultLogo from "@/uni-sub-base/module/cutAccount/icon_cut_default_logo.png"
export default {
    components: {
        popCheckCut,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        roleArr: {
            type: Array,
            default: () => [],
        },
    },
    watch: {
        visible: {
            handler(newVal) {
                this.$nextTick(() => { })
            },
            immediate: true,
        },
        roleArr(data) {
            this.$forceUpdate()
        },
    },
    data() {
        return {
            config: {
                title: "",
                back: false,
                centerSlot: true,
                color: ["#ffffff"],
                statusBarFontColor: "#ffffff",
                backgroundColor: "none",
            },
            userInfo: null,
            datas: [],
            logo: defaultLogo,
            monthReport: null
        }
    },
    mounted() {
        this.userInfo = this.getUserInfo()
        GetMonthReport({
            month: '2020-01'
        }).then(res => {
            this.monthReport = res.result
        })
    },
    onShow() { },
    methods: {
        ...mapMutations(["SET_AUTH"]),
        // 
        goOrder() {
            this.$emit("change", "order")
        },
        cutAccountFn() {
            this.$refs.popCheckCut.openPop()
        },
        getMenuIcon(item) {
            let icon = ""
            switch (item.FunctionCode) {
                case "ERP_Report":
                    icon = "/pages_work/static/icon/icon_work_item_report.png"
                    break
                case "Purchase_Warehousing":
                    icon = "/pages_work/static/icon/icon_work_item_purchase.png"
                    break
                case "Purchase_Order":
                    icon = "/pages_work/static/icon/icon_work_item_order.png"
                    break
                case "TMS_Distribution":
                    icon = "/pages_work/static/icon/icon_work_item_tms.png"
                    break
                case "Return_Order":
                    icon = "/pages_work/static/icon/icon_work_item_return.png"
                    break
                case "Customer_Manage":
                    icon = "/pages_work/static/icon/icon_work_item_customer.png"
                    break
                case "Warehouse":
                    icon = "/pages_work/static/icon/icon_work_item_warehouse.png"
                    break
                case "stock":
                    icon = "/pages_work/static/icon/icon_work_item_stock.png"
                    break
                default:
                    icon = "/pages_work/static/icon/icon_work_item_purchase.png"
                    break
            }
            return icon
        },
        menuClick(item) {
            let url = ""
            switch (item.FunctionCode) {
                case "stock":
                    url = "/pages/stock/index"
                    break
                case "ERP_Report":
                    url = "/pages_erp/index"
                    break
                case "Purchase_Warehousing":
                    url = "/pages_work/packet/purchase/index"
                    break
                case "Purchase_Order":
                    // url = "/pages/select/select-customer?selectType=2"
                    url = "/pages/customer/replace-order?selectType=2"
                    break
                case "TMS_Distribution":
                    url = "/pages_tms/packet/order/list"
                    break
                case "Return_Order":
                    url = "/pages/select/select-customer?selectType=1"
                    break
                case "Customer_Manage":
                    url = "/pages/customer/add"
                    break
                default:
                    break
            }
            this.easyGoTo(url)
        },
        toOfferOrder() {
            // let url = "/pages/customer/offer-order";
            let url = "/pages/customer/replace-order";
            this.easyGoTo(url)
        },
        test() {
            let url = "/pages/private/index"
            this.easyGoTo(url)
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    overflow: hidden;
    overflow-y: auto;
}

.section {
    margin: 24rpx;
    background: rgba(255, 255, 255, 1);
    padding: 24rpx;
    border-radius: 16rpx;

    .section-title {
        font-size: 32rpx;
        padding-bottom: 24rpx;
    }

    .section-main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
            flex: 1;
            padding: 24rpx;
            color: #ffffff;

            &.item_sl {
                background: linear-gradient(141deg, #FDC78B 0%, #FD5D4F 100%, #FD5C4E 100%);
                border-radius: 16rpx;
            }

            &.item_ml {
                background: linear-gradient(132deg, #9AB2FE 0%, #436FFF 100%);
                border-radius: 16rpx;
            }

            .item-title {
                font-size: 24rpx;
                margin-bottom: 10rpx;
            }

            .item-value {
                font-size: 44rpx;
                font-weight: 500;
                margin-bottom: 12rpx;
            }

            .item-row {
                display: flex;
                justify-content: space-between;
                font-size: 24rpx;
                border-bottom: rgba(255, 255, 255, 0.50) dashed 2rpx;
                padding-bottom: 22rpx;
                margin-bottom: 22rpx;

                .r-name {}

                .r-value {
                    font-size: 28rpx;
                    font-weight: 500;
                }
            }
        }
    }

    .summary {
        display: flex;
        margin-bottom: 32rpx;

        .s-item {
            flex: 1;
            display: flex;
            align-items: center;

            .icon {
                width: 72rpx;
                height: 72rpx;
            }

            .con {
                flex: 1;
                margin-left: 12rpx;

                .name {
                    font-size: 24rpx;
                    color: #999;
                }

                .num {
                    font-size: 36rpx;
                    font-weight: 500;
                    word-break: break-all;
                }
            }
        }
    }

    .summary-nav {
        display: flex;
        padding: 24rpx 0;
        margin-bottom: 24rpx;
        background: rgba(245, 246, 247, 1);
        border-radius: 12rpx;

        .item {
            width: 33%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .name {
                color: #666;
                font-size: 22rpx;
                font-weight: 400;
                margin-bottom: 16rpx;
            }

            .value {
                font-size: 32rpx;
                font-weight: 500;
                word-break: break-all;
            }
        }
    }
}

.header {
    display: flex;
    padding: 24rpx 24rpx 0;
    align-items: center;

    .icon {
        width: 72rpx;
        height: 72rpx;
        // background: rgba(241, 39, 12, 1);
        border-radius: 24rpx;
        margin-right: 12rpx;
    }

    .info {
        .name {
            font-size: 32rpx;
            font-weight: bold;
        }

        .mobile {
            font-size: 28rpx;
            color: #999;
        }
    }
}

.nav-list {
    // display: flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .nav-item {
        float: left;
        width: 25%;
        height: 74px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        text-decoration: none;

        .icon {
            width: 72upx;
            height: 72upx;
            margin-bottom: 10upx;
            vertical-align: bottom;
        }

        text {
            color: #333;
        }
    }
}

.container-main {
    // background: $app-color-main;
}


.nav-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 40rpx;
    border-top-right-radius: 60rpx;
    position: relative;
    z-index: 2;
    // background: #f7f7f7;
    // margin-top: -72rpx;
}

// .nav-item {
//     width: 240rpx;
//     height: 150rpx;
//     padding: 36rpx;
//     background: $color-white;
//     border-radius: 32rpx;
//     display: flex;
//     flex-direction: column;
//     margin-bottom: 36rpx;

//     .work-item-icon {
//         width: 80rpx;
//         height: 80rpx;
//         margin-bottom: 24rpx;
//     }

//     .work-item-bar {
//         display: flex;
//         flex-direction: row;
//         justify-content: space-between;

//         .work-item-name {
//             font-size: $font-size-30;
//         }

//         .item-next {
//             width: 40rpx;
//             height: 40rpx;
//             border-radius: 40rpx;
//             display: flex;
//             justify-content: center;
//             align-items: center;

//             .text-icon {
//                 width: 24rpx;
//                 height: 24rpx;
//                 background-image: url(@/pages_work/static/icon/icon_work_item_right.png);
//             }
//         }
//     }
// }

.nav-item-purchase {
    .item-next {
        background-color: #fef4f4;
    }
}

.nav-item-order {
    .item-next {
        background-color: #eff9f7;
    }
}

.nav-item-tms {
    .item-next {
        background-color: #f2f6fe;
    }
}

.nav-item-return {
    .item-next {
        background-color: #f4f2fe;
    }
}

.nav-item-customer {
    .item-next {
        background-color: #fef4f4;
    }
}

.icon-work-tms {
    width: 100rpx;
    height: 100rpx;
    margin-bottom: -20rpx;
    background-image: url(@/static/icon/icon_work_tms.jpg);
}

.cut-account {
    position: absolute;
    right: 40rpx;
    top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 116rpx;
    height: 52rpx;

    background: rgba(255, 255, 255, 0.4);
    border-radius: 8rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20rpx);

    .cut-account-icon {
        width: 30rpx;
        height: 30rpx;
        margin-right: 8rpx;
        display: flex;
    }

    .cut-account-text {
        font-size: $font-size-24;
        color: $color-white;
    }
}

.bei-an {
    position: fixed;
    bottom: 104rpx;
    text-align: center;
    width: 100%;
    left: 0;
}
</style>
